l<template>
    <div id="app-container" style="padding:30px;">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="书籍编号">
          <el-input v-model="bookQuery.id" placeholder="书籍编号"></el-input>
        </el-form-item>
        <el-form-item label="书名">
          <el-input v-model="bookQuery.name" placeholder="书名"></el-input>
        </el-form-item>
        <el-form-item label="作者">
          <el-input v-model="bookQuery.author" placeholder="作者"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="bookQuery.online" placeholder="请选择">
            <el-option label="上线" value="1"></el-option>
            <el-option label="未上线" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="原创">
          <el-select v-model="bookQuery.original" placeholder="请选择">
            <el-option label="原创" value="1"></el-option>
            <el-option label="非原创" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="全本收费">
          <el-select v-model="bookQuery.charge" placeholder="请选择">
            <el-option label="收费" value="1"></el-option>
            <el-option label="免费" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="一级分类">
          <el-select v-model="bookQuery.firstSort" placeholder="请选择">
            <el-option
              v-for="item in firstCategoryList"
              :key="item.id"
              :label="item.title"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-row :gutter="20">
            <el-col :span="7"><el-button type="primary" @click="query()">查询</el-button></el-col>
            <el-col :span="7"><el-button type="primary" @click="reset()">清空</el-button></el-col>
            <el-col :span="7">
              <router-link :to="'/cms/book/create'">
                <el-button type="primary">添加</el-button>
              </router-link>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <el-table :data="bookList" border fit highlight-current-row>
        <el-table-column label="序号" width="70" align="center">
          <template slot-scope="scope">
            {{ (pageNo - 1) * pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="id" label="书籍ID" width="80" />
        <el-table-column prop="name" label="书名"/>
        <el-table-column prop="author" label="作者" />
        <el-table-column prop="firstSort" label="一级分类" :formatter="firstFormat"/>
        <el-table-column prop="secondSort" label="二级分类" :formatter="secondFormat"/>
        <el-table-column label="连载">
          <template slot-scope="scope">
            {{ scope.row.serial === 1 ? '连载中' : '已完结'}}
          </template>
        </el-table-column>
        <el-table-column label="上线状态">
          <template slot-scope="scope">
            {{ scope.row.online === 1 ? '上线' : '未上线'}}
          </template>
        </el-table-column>
        <el-table-column label="全本收费">
          <template slot-scope="scope">
            {{ scope.row.charge === 1 ? '收费' : '免费' }}
          </template>
        </el-table-column>
        <el-table-column prop="startTime" label="授权开始时间" />
        <el-table-column prop="endTime" label="授权结束时间" />
        <el-table-column label="原创">
          <template slot-scope="scope">
            {{ scope.row.original === 1 ? '原创' : '非原创' }}
          </template>
        </el-table-column>
        <el-table-column label="授权状态">
          <template slot-scope="scope">
            {{ currentTime > scope.row.endTime ? '过期' : '有效' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="danger" size="mini" @click="deleteBook(scope.row.id, scope.row.online)">删除</el-button>
            <router-link :to="'/cms/book/update/'+scope.row.id">
              <el-button type="primary" size="mini" >修改</el-button>
            </router-link>
            <el-button v-if="scope.row.online === 0" type="danger" size="mini" @click="upOrDownBook(scope.row.id, 1)">上架书籍</el-button>
            <el-button v-else type="danger" size="mini" @click="upOrDownBook(scope.row.id, 0)">下架书籍</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        :page-size="pageSize"
        :current-page="pageNo"
        :total="total"
        :pager-count="11"
        style="padding: 30px 0; text-align: center;"
        layout="total, prev, pager, next, jumper"
        @current-change="query()">
      </el-pagination>
    </div>
</template>

<script>

import book from '@/api/cms/book.js'
import category from '@/api/cms/category'

export default {
/*  data() { // 自定义变量，初始化变量
    return {
      bookList: null, // ## 数据列表
      bookQuery: {}, // ##查询条件封装对象
      total: 0, // ## 总记录数
      pageNo: 1, // ## 页码
      pageSize: 10, // ## 每页显示记录数
      firstCategoryList: [],
      secondCategoryList: [],
      currentTime: '' // ## 当前时间
    }
  },
  created() { // 页面渲染之前执行
    this.query()
    this.getCategoryList()
  },
  methods: { // 自定义函数
    query(pageNo = 1) { // 查询
      this.pageNo = pageNo
      // 调用后端接口查询数据
      book.query(this.pageNo, this.pageSize, this.bookQuery)
        .then(response => {
          // 赋值
          this.bookList = response.data.items
          this.total = response.data.total
          this.currentTime = this.format(new Date(), 'yyyy-MM-dd HH:mm:ss')
        })
    },
    format(date, fmt) { // ## 格式化日期
      let o = {
        'M+': date.getMonth() + 1, // ## 月份
        'd+': date.getDate(), // ## 日
        'H+': date.getHours(), // ## 小时
        'm+': date.getMinutes(), // ## 分
        's+': date.getSeconds(), // ## 秒
        'q+': Math.floor((date.getMonth() + 3) / 3), // ## 季度
        'S': date.getMilliseconds() // ## 毫秒
      }
      if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
      for (let k in o)
        if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
      return fmt
    },
    reset() { // 清空查询条件内容
      // 清空数据
      this.bookQuery = {}
      // 重新查询
      this.query()
    },
    deleteBook(id, online) {
      if (online === 1) {
        this.$message({
          type: 'error',
          message: '该书籍已上线不允许删除'
        })
      } else {
        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          book.delete(id)
            .then(response => {
              this.$message({
                type: 'success',
                message: '删除成功'
              })
              this.query()
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    },
    upOrDownBook(id, online) { // 书籍上下架
      this.$confirm('此操作将改变书籍状态, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        book.upOrDownBook(id, online)
          .then(response => {
            this.$message({
              type: 'success',
              message: '变更状态完成'
            })
            this.query()
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    getCategoryList() {
      category.getCategoryList()
        .then(response => {
          this.firstCategoryList = response.data.firstCategoryList
        })
    },
    getSecondCategoryList(row) {
      this.book.secondSort = ''
      for (let i = 0; i < this.firstCategoryList.length; i++) {
        if (this.firstCategoryList[i].id === row) {
          this.secondCategoryList = this.firstCategoryList[i].secondCategoryList
        }
      }
    },
    firstFormat(row) {
      for (let i = 0; i < this.firstCategoryList.length; i++) {
        if (row.firstSort === this.firstCategoryList[i].id) {
          return this.firstCategoryList[i].title
        }
      }
    },
    secondFormat(row) {
      for (let i = 0; i < this.firstCategoryList.length; i++) {
        if (row.firstSort === this.firstCategoryList[i].id) {
          for (let j = 0; j < this.firstCategoryList[i].secondCategoryList.length; j++) {
            if (this.firstCategoryList[i].secondCategoryList[j].id === row.secondSort) {
              return this.firstCategoryList[i].secondCategoryList[j].title
            }
          }
        }
      }
    }
  }*/
}
</script>
